<script lang="ts" setup>
import * as Cesium from 'cesium'

import { onMounted } from 'vue'

onMounted(async () => {
    const viewer = new Cesium.Viewer('cesium-container', {
        //这里是配置项
    })

    const scene = viewer.scene

    const tileset_shihua = await Cesium.Cesium3DTileset.fromUrl('https://data.mars3d.cn/3dtiles/max-shihua/tileset.json')

    scene.primitives.add(tileset_shihua)

    viewer.zoomTo(tileset_shihua)

    const feature_list = []

    tileset_shihua.tileLoad.addEventListener(function (tile) {
        let content = tile.content;
        let featuresLength = content.featuresLength;
        console.log("要素数量为：");
        console.log(featuresLength);
        console.log("第一个要素为：");
        let feature = content.getFeature(0);
        feature_list.push(feature)
        console.log(feature);
    })


    const glowStage = new Cesium.PostProcessStage({
        name: 'glowEffect',
        fragmentShader: `
            uniform sampler2D colorTexture;
            in vec2 v_textureCoordinates;
            uniform vec4 highlight;
            float intensity = 2.0; // 泛光强度
            void main() {
                vec4 color = texture(colorTexture, v_textureCoordinates);
                if (czm_selected()) {
                    vec3 highlighted = (highlight.a * highlight.rgb + (1.0 - highlight.a) * color.rgb) * intensity;
                    out_FragColor = vec4(highlighted, 1.0);
                } else {
                    out_FragColor = color;
                }
            }`,
        uniforms: {
            highlight: function () {
                return new Cesium.Color(1.0, 0.0, 0.0, 0.5);
            }
        }
    });

    // 只对加载的模型应用泛光效果
    glowStage.selected = feature_list;

    viewer.scene.postProcessStages.add(glowStage);

})





</script>

<template>
    <div id="cesium-container"></div>
</template>

<style lang="less" scoped>
#cesium-container {
    width: 100vw;
    height: 100vh;

}
</style>